<template>
  <div style="width: 100%; height:100%;">
    <div ref="chartRef" style="width: 90%; height:500px"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

import 'echarts-wordcloud';
export default defineComponent({
  props: {
    rowdata: {
      type: Array as PropType<Array>,
      default: [],  // 设置默认值
    },
    title: {
      type: String as PropType<string>,
      default: '机构名称',  // 设置默认值
    },
    title1: {
      type: String as PropType<string>,
      default: "机构词云",  // 设置默认值
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    onMounted(() => {
      initchart()
    })

    function initchart() {
      setOptions({
        graphic: [
          {
            type: 'text',
            id: 'mainTitle',
            left: 30,
            top: 10,
            style: {
              text: props.title,
              fill: '#333',
              fontSize: 20,
              fontWeight: 'bold',
            }
          },
          {
            type: 'text',
            id: 'subTitle',
            left: 30,
            top: 35,
            style: {
              text: props.title1,
              fill: '#999',
              fontSize: 12,
            }
          },
        ],
        grid: {
          top: '15%'
        },
        toolbox: {
          right: "0%",
          top: "30px",
          feature: {
            dataView: {},
            restore: {},
            saveAsImage: {},
          },
        },
        series: [{
        type: 'wordCloud',
        gridSize: 20,
        sizeRange: [12, 50],
        rotationRange: [-90, 90],
        textStyle: {
            normal: {
                color: function () {
                    return 'rgb(' +
                        Math.round(Math.random() * 255) + ',' +
                        Math.round(Math.random() * 255) + ',' +
                        Math.round(Math.random() * 255) + ')';
                }
            }
        },
        data: [
            {name: '机构名称1', value: 10000},
            {name: '机构名称2', value: 6181},
            {name: '机构名称3', value: 4386},
            {name: '机构名称4', value: 9000},
            {name: '机构名称5', value: 6181},
            {name: '机构名称6', value: 4386},
            {name: '机构名称7', value: 10000},
            {name: '机构名称8', value: 6181},
            {name: '机构名称9', value: 4386},
            {name: '机构名称10', value: 8000},
            {name: '机构名称11', value: 6181},
            {name: '机构名称12', value: 4386},
            // ... 添加更多的词
        ]
    }]
      })
    }
    return {
      chartRef,
      initchart
    }
  }
})
</script>
<style scoped lang=less>
.index2 {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>